<div class="content">
	<h3>Manage your invoices</h3>

	<div id="alertsBox"></div>

	<div class="panel panel-default">
		<accordion close-others="true">
			<accordion-group is-open="isFormOpen">
				<accordion-heading>
					<span class="page_title">{{ formTitle }}</span>
					<i class="pull-right fa" ng-class="{'fa-chevron-down': isFormOpen, 'fa-chevron-right': !isFormOpen}"></i>
				</accordion-heading>

				<form name="projectForm" id="projectForm">
					<div class="input-group form_field first_field">
						<span class="input-group-addon">Project</span>
						<select name="invoice_project" id="invoice_project" class="form-control" ng-model="invoiceModel.project">
							<option ng-repeat="project in projectList" value="{{ project.key }}" ng-selected="invoiceModel.project == project.key">{{ project.name }}</option>
						</select>
					</div>

					<div class="input-group form_field">
						<span class="input-group-addon">Compenso</span>
						<span class="form-control" id="invoice_eur">{{ invoiceModel.amount }}</span>
						<span class="input-group-addon" popover="The total amount of the invoice will be the sum of all invoice's rows" popover-trigger="mouseenter" popover-placement="right" style="cursor:pointer;">
							<i class="fa fa-question"></i>
						</span>
					</div>

					<div class="input-group form_field first_field">
						<span class="input-group-addon">Addizionali</span>
						<div class="form-control" multi-select input-model="additionalTaxes" button-label="name" item-label="name" tick-property="selected" output-model="invoiceModel.additionals" style="z-index:200">
						</div>
						<span class="input-group-addon" popover="I appeared on mouse enter!" popover-trigger="mouseenter" popover-placement="right" style="cursor:pointer;">
							<i class="fa fa-question"></i>
						</span>
					</div>

					<div class="input-group form_field first_field full_field">
						<label class="control-label">Add invoice rows</label>
						<div class="input-group form_field first_field full_field" ng-repeat="row in invoiceModel.rows">
							<div class="input-group form_field first_field">
								<span class="input-group-addon">Description</span>
								<input class="form-control" type="text" name="invoice_row_description[]" ng-model="row.description" />
							</div>
							<div class="input-group form_field small_field">
								<input class="form-control" type="number" name="invoice_row_amount[]" ng-model="row.amount" ng-change="refreshTotalAmount()" />
								<span class="input-group-addon">&euro;</span>
							</div>
							<div class="form_field small_field">
								<button ng-show="$index == (invoiceModel.rows.length -1)" type="button" class="btn btn-default" title="Add a new item" ng-click="addNewInvoiceRow()">
									<span class="fa fa-plus"></span>
								</button>
								<button type="button" class="btn btn-default" title="Remove this item" ng-show="!($index == (invoiceModel.rows.length -1))" ng-click="removeInvoiceRow($index)">
									<span class="fa fa-minus"></span>
								</button>
							</div>
						</div>
					</div>

					<div class="input-group form_field first_field full_field form_button" style="float:right;">
						<button ng-show="!isInEditMode" class="btn btn-default standard_button" type="button" ng-click="saveInvoice(invoiceModel)">
							Save invoice draft <i class="fa fa-floppy-o"></i>
						</button>
						<button ng-show="isInEditMode" class="btn btn-default standard_button" type="button" ng-click="editInvoice(invoiceModel)">
							Edit invoice draft <i class="fa fa-floppy-o"></i>
						</button>
						<button class="btn btn-default standard_button" ng-click="resetEditSelection()"><!-- ng-show="isInEditMode" -->
							Cancel <i class="fa fa-ban"></i>
						</button>
					</div>
				</form>

			</accordion-group>
		</accordion>
	</div>
	<div class="panel panel-default">
		<div class="panel-heading">
			<span class="page_title">View your invoices</span>
		</div>
		<div class="panel-body">
			<form>
				<div class="input-group search_form form_field">
					<!--<input type="text" name="search_customer" id="search_customer" class="form-control" placeholder="Search..." ng-model="customerSearch" />-->
					<span class="input-group-addon">Search <i class="fa fa-search"></i></span>
					<input type="text" ng-model="filterOptions.filterText" ng-change="search()" class="input-large search-query form-control" placeholder="Search">
				</div>
			</form>

			<br/>
			<br/>
			<br/>

			<div class="gridStyle" ng-grid="gridOptions"></div>
		</div>
	</div>

</div>